<template>
	<view>
		<home v-show="current==0"></home>
		<mine v-show="current==1"></mine>
		<view class="tabbar">
			<view class="">
				<view class="tabbar-item" v-for="(item,index) in list" :key="index" @click="current = index">
					<view class="select" v-if="current == index">
						<image class="img" :class="current == index?'ami':''" :src="item.selectedIconPath"
							mode="widthFix">
						</image>
						<text>{{item.text}}</text>
					</view>
					<view v-else>
						<image class="img" :src="item.iconPath" mode="widthFix"></image>
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapActions
	} from "vuex"
	export default {
		data() {
			return {
				current: 0,
				list: [{
					"text": "首页",
					"iconPath": "/static/images/home/tabbar1.png",
					"selectedIconPath": "/static/images/home/tabbar2.png"
				}, {
					"text": "个人中心",
					"iconPath": "/static/images/home/tabbar3.png",
					"selectedIconPath": "/static/images/home/tabbar4.png"
				}]
			};
		},
		onLoad(option) {
			this.current = option.type || 0

		},
		onShow() {
			if (this.isLogin()) {
				this.getUserInfo()
			}
		},
		methods: {
			...mapActions({
				getUserInfo: 'getUserInfo',
			}),
		}
	}
</script>
<style lang="scss" scoped>
	.tabbar {
		width: 100% !important;
		height: 125rpx !important;
		background: #FFFFFF;
		z-index: 999;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		color: #999;
		font-weight: bold;
		padding-bottom:env(safe-area-inset-bottom);
		>view {
			width: 100% !important;
			height: 125rpx !important;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}

		.tabbar-item {
			width: 50%;
			height: 125rpx !important;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			>view {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #666;
				font-size: 19.83rpx;

				.img {
					width: 46.88rpx;
					height: 46.88rpx;
					margin-bottom: 5rpx;
				}
			}

			.select {
				color: #0355E5;
				position: relative;


			}

			.select::after {
				content: '';
				position: absolute;

			}

			.ami {
				animation: bounce .5s;

			}

			@-webkit-keyframes bounce {
				0% {
					transform: scale(0.5);
					box-shadow: #999;
				}

				50% {
					transform: scale(1.2);
					box-shadow: #666;
				}

				100% {
					transform: scale(1);
					box-shadow: #999;
				}
			}

		}

	}
</style>